<template>
  <div class="top">
    <img src="../assets/img/arrow-right-black.png" alt="" />
    <span>新增收获地址</span>
  </div>
  <van-address-edit
    :area-list="areaList"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    show-set-default
    save-button-text="确定"
    @save="onSave"
  />
</template>

<script>
import { areaList } from "@vant/area-data";
import { addAddressApi } from "../../utils/api";
export default {
  data() {
    return {
      areaList,
    };
  },
  methods: {
    onSave(content) {
      // console.log(content);
      // console.log(content.name);
      // console.log(content.tel);
      // console.log(content.areaCode);
      // console.log(
      //   `${content.province}${content.city}${content.county}${content.addressDetail}`
      // );
      console.log(localStorage.getItem("token"));
      addAddressApi({
        token: localStorage.getItem("token"),
        name: content.name,
        phone: content.tel,
        address: `${content.province}${content.city}${content.county}${content.addressDetail}`,
        status: "1",
      }).then((res) => {
        console.log(res);
        this.$router.push("/address");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: center;
  padding: 12px;
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid #eee;
  img {
    transform: rotate(-180deg);
    width: 20px;
    height: 25px;
    position: absolute;
    left: 14px;
  }
  span {
    font-size: 22px;
    text-align: center;
  }
}
.van-address-edit {
  padding: 0;
}
</style>
